<template>
    <div v-if="state.open">
        <a-modal 
            v-model:open="state.open" 
            title="发布管理" 
            @ok="handleOk"
        >
            <div class="publish-dialog">
                <div class="publish-container flex items-center">
                    <div class="left h-full flex flex-col justify-center flex-1">
                        <span class="text-gray-500">大屏地址：</span>
                        <span>{{ state.previewUrl }}</span>
                    </div>
                    <div class="right flex flex-col items-center h-full ml-5 justify-around">
                        <a-button @click="copy">
                            复制地址
                        </a-button>
                        <a-button @click="publish">
                            {{ dataviewState.projDetail.isPublish === 1 ? '取消发布' : '发布大屏' }}
                        </a-button>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import { useDataViewStore } from '@/stores/dataview'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router';
import { showMsg } from '@/utils';

const emits = defineEmits<{
    (e:"updateDataViewProject",value:any):void
}>()

const originUrl = window.location.origin; // 域名和协议
const route = useRoute()

const dataviewStore = useDataViewStore()
const {dataviewState} = storeToRefs(dataviewStore)
const state = reactive({
    open:false,
    previewUrl:originUrl + `/chart/preview/${route.params.id}`
})

const cancel = ()=>{
    state.open = false
}

const handleOk = ()=>{
    cancel()
}

const handleOpen = ()=>{
    state.open = true
}

const copy = ()=>{
    navigator.clipboard.writeText(state.previewUrl).then(()=>{
        showMsg('复制成功', 'success')
    })
}

const publish = ()=>{
    // 暂未处理发布的时候 更新画布操作。这里会执行init函数，init会更新当前项目的所有数据，若操作了画布则不会更新
    dataviewState.value.projDetail.isPublish === 1 
        ? emits('updateDataViewProject',{isPublish:2}) : emits('updateDataViewProject',{isPublish:1})
}

defineExpose({
    handleOpen
})
</script>

<style scoped lang="scss">
.publish-container{
    height: 75px;
    .left{
        background-color: rgba(170, 255, 227, 0.4);
        padding: 5px 10px;
    }
}
</style>